<template>
  <!-- 帮助 -->
  <div class="information-content-h5 notice-h5-information">
    <h1 class="information-content-h5__title">
      <h3 @click="goBack"><i-teenyicons-arrow-left-solid /> {{ title }}</h3>
    </h1>
    <van-tabs :ellipsis="false" v-model:active="navsActive">
      <van-tab :title="item.title" v-for="item in navs" :key="item.active"></van-tab>
    </van-tabs>
    <div class="help-notice-h5">
      <div class="help-h5-box" v-if="navsActive == 0">
        <div class="newClause_center_title" v-html="t('help.help_text001').replace('{0}', name)">
        </div>
        <div class="kys_content">
          <div class="stretch" v-html="t('help.help_text002')">
          </div>
          <div class="stretch" v-html="t('help.help_text003')">
          </div>
          <div class="stretch" v-html="t('help.help_text004')">
          </div>
          <div class="stretch" v-html="t('help.help_text005')">
          </div>
        </div>
      </div>
      <div class="help-h5-box" v-if="navsActive == 1">
        <div class="newClause_center_title">{{ t('help.help_text006') }}</div>
        <div class="kys_content">
          <div class="stretch" v-html="t('help.help_text007').replace('{0}', name)">
          </div>
          <div class="stretch" v-html="t('help.help_text008')">
          </div>
          <div class="stretch" v-html="t('help.help_text009')">
          </div>
          <div class="stretch" v-html="t('help.help_text010')">
          </div>
          <div class="stretch" v-html="t('help.help_text011')">
          </div>
          <div class="stretch" v-html="t('help.help_text012')">
          </div>
          <div class="stretch" v-html="t('help.help_text013')">
          </div>
          <div class="stretch" v-html="t('help.help_text014')">
          </div>
        </div>
      </div>
      <div class="help-h5-box" v-if="navsActive == 2">
        <div id="printMe">
          <div class="newClause_center_title">{{ t("bottom.Privacy") }}</div>
          <div class="kys_content">
            <div class="stretch" v-html="t('help.help_text015').replace('{0}', name)">
            </div>
            <div class="stretch" v-html="t('help.help_text016')">
            </div>
            <div class="stretch" v-html="t('help.help_text017')">
            </div>
            <div class="stretch" v-html="t('help.help_text018')">
            </div>
            <div class="stretch" v-html="t('help.help_text019')">
            </div>
            <div class="stretch" v-html="t('help.help_text020')">
            </div>
            <div class="stretch" v-html="t('help.help_text021')">
            </div>
            <div class="stretch" v-html="t('help.help_text022')">
            </div>
            <div class="stretch" v-html="t('help.help_text023')">
            </div>
            <div class="stretch" v-html="t('help.help_text024')">
            </div>
            <div class="stretch" v-html="t('help.help_text025')">
            </div>
            <div class="stretch" v-html="t('help.help_text026')">
            </div>
            <div class="stretch" v-html="t('help.help_text027')">
            </div>
            <div class="stretch" v-html="t('help.help_text028')">
            </div>
            <div class="stretch" v-html="t('help.help_text029')">
            </div>
            <div class="stretch" v-html="t('help.help_text030')">
            </div>
            <div class="stretch" v-html="t('help.help_text031')">
            </div>
            <div class="stretch" v-html="t('help.help_text032')">
            </div>
            <div class="stretch" v-html="t('help.help_text033')">
            </div>
            <div class="stretch" v-html="t('help.help_text034')">
            </div>
            <div class="stretch" v-html="t('help.help_text035')">
            </div>
            <div class="stretch" v-html="t('help.help_text036')">
            </div>
            <div class="stretch" v-html="t('help.help_text037')">
            </div>
          </div>
        </div>
      </div>
      <div class="help-h5-box" v-if="navsActive == 3">
        <div id="printMe">
          <div class="newClause_center_title">{{ t('help.help_text038') }}</div>
          <div class="kys_content">
            <div class="stretch" v-html="t('help.help_text039')">
            </div>
            <div class="stretch" v-html="t('help.help_text040')">
            </div>
            <div class="stretch" v-html="t('help.help_text041')">
            </div>
            <table width="300" border="0" class="table" cellpadding="0" cellspacing="0">
              <tr>
                <td>{{ t('help.help_text042') }}</td>
                <td>{{ t('help.help_text043') }}</td>
              </tr>
              <tr>
                <td>{{ t('help.help_text044') }}</td>
                <td>{{ t('help.help_text045') }}</td>
              </tr>
              <tr>
                <td>{{ t('help.help_text046') }}</td>
                <td>{{ t('help.help_text047') }}</td>
              </tr>
              <tr>
                <td>{{ t('help.help_text048') }}</td>
                <td>{{ t('help.help_text049') }}</td>
              </tr>
            </table>
            <div class="stretch" v-html="t('help.help_text050')">
            </div>
            <div class="stretch" v-html="t('help.help_text051')">
            </div>
            <div class="stretch" v-html="t('help.help_text052')">
            </div>
            <div class="stretch" v-html="t('help.help_text053')">
            </div>
            <div class="stretch" v-html="t('help.help_text054')">
            </div>
            <div class="stretch" v-html="t('help.help_text055')">
            </div>
            <div class="stretch" v-html="t('help.help_text056')">
            </div>
            <div class="stretch" v-html="t('help.help_text057')">
            </div>
            <div class="stretch" v-html="t('help.help_text058')">
            </div>
          </div>
        </div>
      </div>
      <div class="help-h5-box" v-if="navsActive == 4">
        <div id="printMe">
          <div class="newClause_center_title">{{ t('help.help_text059') }}</div>
          <div class="kys_content">
            <div class="stretch" v-html="t('help.help_text060')">
            </div>
            <div class="stretch" v-html="t('help.help_text061')">
            </div>
            <div class="stretch" v-html="t('help.help_text062')">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="HelpH5">
import userinfo from '@/store/userinfo';
import userinfoApi from '@/api/modules/userinfo';
import { parseTime } from '@/utils/format';
import system from '@/store/system';

const { t } = useI18n();

const emits = defineEmits(['back']);
const piniaUserinfo:any = userinfo();
const piniaSystem:any = system();
const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  tabActive: {
    type: Number,
    default: 0
  }
});

const data:any = reactive({
  navs: [
    {
      title: t('bottom.KYSPolicy'),
      id: 0
    },
    {
      title: t('bottom.Responsible'),
      id: 1
    },
    {
      title: t('bottom.Privacy'),
      id: 2
    },
    {
      title: t('bottom.Terms'),
      id: 3
    },
    {
      title: t('home.wash'),
      id: 4
    },
  ],
  navsActive: props.tabActive || 0,
  name: import.meta.env.VITE_APP_TITLE
});

const {
  navs,
  navsActive,
  name,
} = toRefs(data);


const goBack = () => {
  emits('back');
}
</script>

<style lang="scss" scoped>
@import url(./index.scss);
.information-content-h5{
  &.notice-h5-information{
    height: 100%;
  }
}
.notice-h5{
  position: relative;
  height: calc(100% - var(--rem-120));
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;

  .notice-box{
    position: absolute;
    width: 100%;
    padding: var(--rem-20);
    .notice-box-item{
      position: relative;
      background-color: var(--z-bg-def);
      border-radius: var(--rem-30);
      display: flex;
      align-items: center;
      height: var(--rem-60);
      padding: 0 var(--rem-25) 0px var(--rem-10);
      margin-bottom: var(--rem-10);
      cursor: pointer;
      .notice-info__title{
        font-size: var(--rem-14);
        font-weight: bold;
        color: var(--z-font-anti);
      }
      .notice-info__time{
        font-size: var(--rem-12);
      }
      .notice-info{
        margin-left: var(--rem-8);
      }
      .notice-linker{
        display: flex;
        align-items: center;
        font-size: var(--rem-12);
        margin-left: auto;
        span{
          margin: 0 var(--rem-8);
        }
        svg{
          font-size: var(--rem-10);
        }
      }
      &.notice-box__header{
        background-color: transparent;
      }
    }
    .notice-box__content{
      margin-left: var(--rem-55);
      background-color: var(--z-bg-def);
      border-radius: var(--rem-20);
      padding: var(--rem-20);
      box-sizing: border-box;
      color: var(--z-font-anti);
      p{
        min-height: var(--rem-80);
      }
      .notice-box__content-footer{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: var(--rem-10);
        img{
          width: var(--rem-18);
          height: var(--rem-18);
          margin-left: var(--rem-15);
          margin-right: var(--rem-10);
        }
      }
    }
    .notice-box__tips{
      margin-left: var(--rem-70);
      font-size: var(--rem-12);
      margin-top: var(--rem-15);
    }
  }
  .onebyone{
    position: fixed;
    background-color: var(--z-bg-content);
    width: 100%;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--rem-60);
    bottom: 0;
    button{
      width: 80%;
    }
  }
}
.no-content-yet{
  text-align: center;
  line-height: 175rem;
}
$timer: 0.7s;
.noticebox-enter-active {
  animation: bounceInLeft $timer;
}
.noticebox-leave-active {
  animation: bounceOutLeft $timer;
}
.noticecontent-enter-active {
  animation: bounceInRight $timer;
}
.noticecontent-leave-active {
  animation: bounceOutRight $timer;
}

.help-notice-h5{
  padding: var(--rem-20);
}
</style>
